<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视的属性的另一种写法</title>
</head>
<body>
  <div id="root">
      <h1 @click="isHot = !isHot " >{{isHot? '炎热':'凉爽'}}</h1>
  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>

    const vue = new Vue({
        el:'#root',
        data:{
            isHot: false
        }
    });

    //完整写法
   /* vue.$watch('isHot',{
        immediate: false,
        deep:false,
        handler(newValue, oldValue) {
            console.log("触发监视",newValue,oldValue)
        }

    });*/

    //精简写法
    vue.$watch('isHot',(newValue,oldValue)=>{
        console.log("开启监听",newValue,oldValue)
    })


</script>
</body>
</html>